import { useEffect, useState, useMemo, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { Row, Col, Space, Rate, Tag, Divider } from 'antd';
import loadable from '@loadable/component';

import useAuthAction from '@/hooks/useAuthAction';
import { setStore } from '@/reducers/common';
import { getKeyFromUrl, formatNumber } from '@/utils';
import { MERCH_NATURE } from '@/config';
import { MERCH_EDIT, ROLE_EDIT, WORK_EDIT, EDIT_HISTORY, WORK_DETAIL, ROLE_DETAIL } from '@/config/url';
import { getMerchInfo, likeMerch, unLikeMerch, haveMerchUp, haveMerchDown, wantMerchUp, wantMerchDown } from '@/service/api';
import useDevice, { DEVICES } from '@/hooks/useDevice';
import styles from './index.module.scss';

const IconFont = loadable(() => import('@/components/IconFont'));
const Poster = loadable(() => import('@/pages/components/Poster/Poster'));

// type: merch -> , role, work
export default ({dataSource={}, type='merch'}) => {
    const initState = () => ({
        posterVisible: false,
        merchInfo: dataSource || {},
    });
    const [state, setState] = useState(initState);
    const withAuth = useAuthAction();
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const id = getKeyFromUrl('id');
    const config = {
        merch: MERCH_EDIT,
        role: ROLE_EDIT,
        work: WORK_EDIT
    };

    // 跳转编辑页核心逻辑
    const toEditCore = () => {
        navigate(`${config[type]}?id=${id}`);
    };
    // 跳转编辑页（带登录校验）
    const toEdit = withAuth(toEditCore);
    
    // 跳转变更历史页
    const toHistory = () => {
        navigate(`${EDIT_HISTORY}?id=${id}&type=${type}`);
    };
    // 弹出分享弹窗
    const toShare = () => {
        setState(o => ({...o, posterVisible: true}));
    };
    // 举报核心逻辑
    const toReportCore = () => {
        dispatch(setStore({ reportVisible: true, reportTarget: { ...state.merchInfo, type: 'merch' } }));
    };
    // 举报（带登录校验）
    const toReport = withAuth(toReportCore);

    useEffect(() => {
        setState(o => ({...o, merchInfo: dataSource}));
    }, [dataSource]);

    return (
        <>
            <div className={styles['container']}>
                <Space size="small">
                    <div className={styles['btn-item']} onClick={toEdit}><span><IconFont name="icon-edit-1"/></span>编辑</div>
                    <div className={styles['btn-item']} onClick={toHistory}><span><IconFont name="icon-history-1"/></span>变更历史</div>
                    <div className={styles['btn-item']} onClick={toShare}><span><IconFont name="icon-share-1"/></span>分享</div>
                    { type === 'merch' && <div className={styles['btn-item']} onClick={toReport}><span><IconFont name="icon-warning-1"/></span>举报</div> }
                </Space>
            </div>

            {/* 分享海报 */}
            <Poster
                open={state.posterVisible}
                dataSource={state.merchInfo || {}}
                onOk={() => setState(o => ({...o, posterVisible: false}))}
                onCancel={() => setState(o => ({...o, posterVisible: false}))}
            />
        </>
    )
}
